<template>
	<view class="container1">
		<scroll-view 
		scroll-y="true"
		style="height: 86vh;"
		 >
			<!-- 头部 -->
			<view class="header" v-model="tabelData">
				<view class="left_11">
						<text class="sapce">{{ tabelData?.post }}【{{ tabelData?.job_attribute }}】</text>
						<text class="grey">{{ tabelData?.area }} | {{ tabelData?.education }} | {{ tabelData?.work_experience }}</text>
				</view>
				<view class="right_11">
					<text class="sapce color">{{ tabelData?.salary }}</text>
					<text class="grey">{{ tabelData?.publish_time }}发布</text>
				</view>
			</view>
			<!-- 公司图片 -->
			<view class="content_11">
					<image class="comlogo" :src="tabelData?.logo_url" mode="heightFix"></image>
				<view class="text_11">
					<text class="fontsize25">{{ tabelData?.name }}</text>
					<text class="color_blue">今日活跃</text>
				</view>
				<view class="read">
					<image class="read_image" src="/static/liulan.svg" mode="heightFix"></image>
					<text>99次</text>
				</view>
			</view>
			<!-- 职位描述 -->
			<view class="content_12">
				<text class="text_12 margin_bottom20 fontsize25">职位描述</text>
				<text class="grey margin_bottom20">岗位职责:</text>
				<textarea 
					:value="tabelData?.statement"
					cols="30" 
					rows="10"
					>
				</textarea>
				<text class="grey margin_bottom20">任职要求:</text>
				<textarea 
					:value="tabelData?.requirements" 
					cols="30" 
					rows="10"
					>
				</textarea>
			</view>
			<!-- 岗位诱惑 -->
			<view class="content_12">
				<text class="text_12 margin_bottom20 fontsize25">岗位诱惑</text>
				<view class="list">
					<text class="text_13" v-for="item in JSON.parse(tabelData.welfare)">{{ item }}</text>
				</view>
			</view>
			<!-- 工作地址 -->
			<view class="content_12">
			<text class="text_12 margin_bottom20 fontsize25">工作地址</text>
			<text>{{ tabelData?.location }}</text>
		</view>
		</scroll-view>
	</view>
	<!-- 底部栏 -->
	<view class="footer">
		<view class="footer_img">
			<view class="image_l123">
				<image class="image_height" src="/static/fenxiang01.svg" mode="heightFix"></image>
				<text>分享</text>
			</view>
			<view class="image_l123">
				<image class="image_height" src="/static/shoucang.svg" mode="heightFix"></image>
				<text>收藏</text>
			</view>
			<view class="image_l123">
				<image class="image_height" src="/static/-tousu.svg" mode="heightFix"></image>
				<text>投诉</text>
			</view>
		</view>
		<!-- 按钮 -->
		<view class="btn_floo">
			<button>立即沟通</button>
			<button>投递简历</button>
		</view>
	</view>
</template>

<script>
	export default {
		onLoad(options) {
			const params = decodeURIComponent(options.data)
			this.dataId = params;
			// console.log("id值打印",this.dataId)
			this.fetchData(this.dataId);
		},
		data() {
			return {
				dataId:null,
				tabelData:null,
				words:"1231312312",
				text:"1、兑换好当天所需要零钱，备用金必须天天核对，不得以白条抵现；"
			}
		},
		methods: {
			async fetchData(id){
				const res = await this.$axios.get(`http://localhost:3000/api/jobs/${id}`) 
				this.tabelData = res.data[0];
				console.log(this.tabelData.post)
				// console.log(res.data)
			}
		}
	}
</script>

<style scoped>

	.header{
		display: flex;
		padding: 40rpx;
		border-bottom: 1px solid rgba(210, 210, 210, 1);
	}
	
	.left_11{
		display: flex;
		flex-direction: column;
	}
	
	.sapce{
		margin-bottom: 15rpx;
		font-size: 35rpx;
	}
	
	.grey{
		color: rgba(123,123,123,1);
	}
	
	.right_11{
		flex: 1;
		text-align: right;
		display: flex;
		flex-direction: column;
	}
	
	.color{
		color: rgba(255,64,129,1);
	}
	
	.content_11{
		padding: 50rpx;
		border-bottom: 2px solid rgba(210, 210, 210, 1);
		display: flex;
	}
	
	.text_11{
		display: flex;
		flex-direction: column;
		justify-content: space-between;
	}
	
	.comlogo{
		height: 100rpx;
		margin-right: 30rpx;
	}
	
	.fontsize25{
		font-size: 35rpx;
	}
	
	.color_blue{
		color: rgba(64,181,255,1);
	}
	
	.read{
		flex: 1;
		text-align: right;
		display: flex;
		justify-content: end;
		align-items: center;
		text-align: right;
	}

	.read_image{
		height: 30rpx;
		margin-right: 15rpx;
	}
	
	.content_12{
		padding: 50rpx 25rpx;
		display: flex;
		flex-direction: column;
		border-bottom: 2px solid rgba(210, 210, 210, 1);
	}
	
	.text_12{
		padding-left: 10rpx;
		border-left: 4px solid rgba(64,181,255,1); 
	}
	
	.margin_bottom20{
		margin-bottom: 20rpx;
	}
	
	.text_13{
		padding: 10rpx 20rpx;
		margin-left: 20rpx;
		border: 2rpx solid rgba(210, 210, 210, 1);
		border-radius: 20rpx;
	}
	
	.footer{
		padding: 20rpx 30rpx;
		position: absolute;
		bottom: 0;
		right: 0;
		left: 0;
		height: 6vh;
		/* width: 100vw; */
		background-color: rgba(210, 210, 210, 1);
		display: flex;
	}
	
	.footer_img{
		flex: 3;
		padding: 15rpx 20rpx;
		display: flex;
		justify-content: space-between;
	}
	
	.footer_img{
		display: flex;
	}
	
	.footer_img image{
		height: 40rpx;
		display: flex;
	}
	
	.image_l123{
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		align-items: center;
	}
	
	.image_l123 text{
		font-size: 25rpx;
	}
	
	.btn_floo{
		padding: 15rpx 20rpx;
		flex: 4;
		display: flex;
	}
	
	.btn_floo button{
		font-size: 25rpx;
	}
	


</style>
